<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>坐标计算</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-image: url('images/image.png'); /* 设置背景图片的URL */
            background-size: cover; /* 调整背景图片大小以填充整个页面 */
            color: rgb(24, 24, 24); /* 设置文字颜色为白色 */
            display: flex;
            justify-content: center; /* 将内容水平居中 */
            align-items: center; /* 将内容垂直居中 */
            height: 100vh; /* 使用视口高度作为高度，保证内容垂直居中 */
        }
        label {
            font-weight: bold;
            display: block; /* 使标签变为块级元素，占据整行 */
            margin-bottom: 5px; /* 添加底部间距 */
        }
        input[type="number"], input[type="submit"] {
            padding: 5px;
            margin: 5px 0; /* 上下间距为5px，左右为0 */
            width: 100px;
            background-color: rgba(221, 183, 183, 0.3); /* 设置输入框背景色为透明黑色 */
            border: none; /* 去掉输入框的边框 */
            color: rgb(8, 8, 8); /* 设置输入框文字颜色为白色 */
        }
        input[type="number"]:focus, input[type="submit"]:focus {
            outline: none; /* 去掉输入框获取焦点时的默认边框 */
        }
        #pointForm {
            background-color: rgba(221, 183, 183, 0.3); /* 设置表单的半透明背景 */
            padding: 20px;
            border-radius: 10px;
            width: 80%; /* 设置表单宽度 */
            max-width: 600px; /* 最大宽度，避免在大屏幕上过宽 */
            display: flex; /* 使用 Flex 布局 */
            flex-wrap: wrap; /* 允许表单元素换行 */
            justify-content: space-between; /* 元素之间的空间平均分配 */
        }
        #pointForm .input-group {
            flex: 1 1 100%; /* 允许输入组占据剩余空间，并可以换行 */
            margin-bottom: 10px; /* 下边距增加 */
        }
        #pointForm .input-group.full-width {
            width: 100%; /* 设置宽度为100% */
        }
        #result {
            background-color: rgba(221, 183, 183, 0.3);
            margin-top: 20px;
            color: rgb(26, 25, 25); /* 设置结果区域文字颜色 */
        }
    </style>
</head>
<body>
    <div>
        <h2>坐标计算</h2>
        <form id="pointForm">
            <div class="input-group">
                <label for="startX">起点 X 坐标:</label>
                <input type="number" id="startX" name="startX" step="any" required>
            </div>
            <div class="input-group">
                <label for="startY">起点 Y 坐标:</label>
                <input type="number" id="startY" name="startY" step="any" required>
            </div>
            <div class="input-group">
                <label for="endX">终点 X 坐标:</label>
                <input type="number" id="endX" name="endX" step="any" required>
            </div>
            <div class="input-group">
                <label for="endY">终点 Y 坐标:</label>
                <input type="number" id="endY" name="endY" step="any" required>
            </div>
            <div class="input-group full-width">
                <label for="numPoints">点的数量:</label>
                <input type="number" id="numPoints" name="numPoints" min="1" value="5" required>
            </div>
            <div class="input-group full-width">
                <label for="distanceStep">距离步长:</label>
                <input type="number" id="distanceStep" name="distanceStep" step="any" value="100.0" required>
            </div>
            <div style="flex: 1 1 100%; display: flex; justify-content: flex-end;">
                <input type="submit" value="计算点">
            </div>
        </form>

        <div id="result">
            <!-- 计算结果将显示在这里 -->
        </div>
    </div>
<script>
        document.getElementById('pointForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单提交

            // 获取输入值
            let startX = parseFloat(document.getElementById('startX').value);
            let startY = parseFloat(document.getElementById('startY').value);
            let endX = parseFloat(document.getElementById('endX').value);
            let endY = parseFloat(document.getElementById('endY').value);
            let numPoints = parseInt(document.getElementById('numPoints').value);
            let distanceStep = parseFloat(document.getElementById('distanceStep').value);

            // 计算方向向量
            let directionX = endX - startX;
            let directionY = endY - startY;

            // 计算方向向量长度
            let length = Math.sqrt(directionX * directionX + directionY * directionY);

            // 归一化方向向量
            let unitX = directionX / length;
            let unitY = directionY / length;

            // 生成并显示点
            let resultHTML = '<h3>可能需要的坐标点:</h3>';
            for (let i = 1; i <= numPoints; ++i) {
                let distance = i * distanceStep;
                let newX = endX + distance * unitX;
                let newY = endY + distance * unitY;
                resultHTML += `<p>第 ${i} 点: (${newX.toFixed(2)}, ${newY.toFixed(2)}) 距离终点距离: ${distance.toFixed(2)}</p>`;
            }

            document.getElementById('result').innerHTML = resultHTML;
        });
    </script>
</body>
</html>
